<template>
  <ul style="padding: 6px">
    <li>
      <div>
        <el-icon><Platform /></el-icon>
        <span>主页</span>
      </div>
    </li>
    <li @click="handler('chat')">
      <div>
        <el-icon><UserFilled /></el-icon>
        <span>客户</span>
      </div>
    </li>
    <li @click="handler('document')">
      <div>
        <el-icon><ChromeFilled /></el-icon>
        <span>浏览器</span>
      </div>
    </li>
    <li>
      <div>
        <el-icon><Tools /></el-icon>
        <span>设置</span>
      </div>
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { ChromeFilled, UserFilled, Platform, Tools } from '@element-plus/icons-vue';
const emit = defineEmits(['change']);
const handler = (name: string) => {
  emit('change', name);
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
  margin-top: 5px;

  li {
    margin: 0;
    list-style: none;
    width: 39px;
    height: 39px;
    padding: 5px;
    text-align: center;
    transition: 300ms;
    margin-bottom: 10px;
    opacity: 0.5;

    i {
      display: block;
      margin: auto;
      font-size: 18px;
    }
    span {
      font-size: 12px;
    }
    &:hover {
      opacity: 1;
      cursor: pointer;
      background: var(--hover-color);
    }
  }
}
</style>
